<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/index/admin-info' }"
            >用户信息</el-breadcrumb-item
          >
          <el-breadcrumb-item>上传头像</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <!-- 文件上传组件
          action: 表示文件将要上传的服务器路径
          show-file-list: 是否传递多个文件 ，传递多个文件产生一个list列表存多个文件
          data:出了上传文件之外需要携带的   基本数据 （需要封装在object对象）
          on-success： 处理文件上传成功之后，触发的操作(利用它做一些成功之后的页面渲染)
          before-upload：文件上传请求之前，触发的操作，（利用它配置文件上传要求，文件类型，文件大小...）
          on-progress:文件上传时的钩子（可以添加加载中状态图像....）
          v-loading:很多element组件通用的属性，true:会在组件上出现加载中状态....
        -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/elemrg/admin/uploadPic"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-progress="handleonProgress"
          :on-error="handleonError"
          :data="myparams"
          v-loading="loading"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      //图片路径
      imageUrl: "",
      //基本数据：因为服务器后台给我的接口在文件上传时候，需要用户名username
      myparams: { username: localStorage.getItem("logname") },
    };
  },
  methods: {
    //文件上传失败的钩子
    handleonError(err, file) {
      console.log(err);
      this.$message.error(err);
      //关闭加载中图像
      this.loading = false;
    },
    //文件上传时的钩子
    handleonProgress(event, file) {
      //将loading打开
      this.loading = true;
    },
    //文件上传成功之后处理方法 res:服务器返回给我的数据  file:上传的文件对象
    handleAvatarSuccess(res, file) {
      //添加定时器，故意延迟2秒钟，查看加载图像效果
      setTimeout(() => {
        //结束加载状态图像
        this.loading = false;
        console.log(res);
        //文件上传成功之后，将文件的路径存到状态值imageUrl中，可以在页面显示出你上传的图片
        this.imageUrl = URL.createObjectURL(file.raw);
        //根据服务器响应res做出页面相关渲染
        if (res.code === 0) {
          //上传成功
          this.$message({
            message: "头像上传成功",
            type: "success",
          });
          //返回到用户信息界面
          this.$router.push("/index/admin-info");
        } else {
          this.$message.error("头像上传失败");
        }
      }, 2000);
    },
    //文件上传之前的配置 file：即将上传的文件对象
    beforeAvatarUpload(file) {
      //文件类型设定
      const isJPG = file.type === "image/jpeg";
      // const isPNG = file.type === "image/png";
      //文件大小的设定  2M = 2 * 1024 * 1024     2kb = 2 * 1024
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      //此处如果返回false,文件不再继续上传
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped lang="scss">
.el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  // outline: 0;
  border: 1px dashed #ccc;
}
// 头像框样式
// .avatar-uploader .el-upload {
//   border: 1px dashed #aaa !important;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>